<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>管理员管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="regwrap">
      <el-form
        :model="regForm"
        status-icon
        :rules="regrules"
        ref="regForm"
        label-width="auto"
        class="demo-ruleForm"
      >
        <el-form-item prop="account">
          <el-input type="text" v-model="regForm.account" autocomplete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="regForm.password" autocomplete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item>
          <button class="regbtn" @click.prevent="submitFormReg('regForm')">添加</button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    var validatepassword = (rule, value, callback) => {
      let pwdRegExp = /[a-zA-Z_0-9]{6,15}/;
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (pwdRegExp.test(value) != true) {
        callback(new Error("密码格式不正确"));
      } else {
        callback();
      }
    };
    var validateaccount = (rule, value, callback) => {
      let actRegExp = /^[A-Za-z0-9]{3,9}$/;
      if (value === "") {
        callback(new Error("请输入账号"));
      } else if (actRegExp.test(value) != true) {
        callback(new Error("账号格式不正确!"));
      } else {
        callback();
      }
    };
    return {
      regForm: {
        account: "",
        password: ""
      },
      regrules: {
        account: [{ validator: validateaccount, trigger: "blur" }],
        password: [{ validator: validatepassword, trigger: "blur" }]
      }
    };
  },
  methods: {
    submitFormReg(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          axios.post("/admin/addnewadmin", this.regForm).then(res => {
            if (res.data) {
              this.$message({
                message: "添加成功",
                type: "success"
              });
              this.$refs[formName].resetFields();
            } else {
              this.$message({
                message: "添加失败",
                type: "warning"
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style scope>
.regwrap {
  width: 500px;
  height: 350px;
  padding: 40px;
}
.el-input__inner {
  background-color: #0000 !important;
  border-color: #ccc !important;
}

.el-input__inner:focus {
  border-color: #ff9900 !important;
}
.el-form-item__error {
  color: #ff9900 !important;
}
.el-form-item.is-error .el-input__validateIcon {
  color: #ff9900;
}
.regbtn {
  background-color: #ff9900;
  border: none;
  width: 200px;
  height: 50px;
  font-size: 20px;
  border-radius: 5px;
  font-weight: 600;
}
</style>